<template>
  <div class="app-container" style="overflow: scroll">
    <el-form ref="submitParams" :model="submitParams" :rules="rules" label-width="120px">
      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>参与机构业务管理通知报文</span>
        </div>
        <el-row>
          <el-col :offset="3" :span="8">
            <el-form-item label="系统编号" prop="sysCode">
              <el-select
                v-model="submitParams.sysCode"
                placeholder="系统编号"
                style="width: 100%"
                @change="sysCodeChange"
                :disabled="formdisable"
              >
                <el-option
                  v-for="dict in dictMap.ORGAN_SYSTYPE_310"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :offset="3" :span="8">
            <el-form-item label="管理类型" prop="mngType">
              <el-select
                v-model="submitParams.mngType"
                placeholder="管理类型"
                style="width: 100%"
                :disabled="formdisable"
              >
                <el-option
                  v-for="dict in dictMap.MNG_TYPE"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="管理数目" prop="mngNum">
              <el-input v-model="submitParams.mngNum" :disabled="true" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :offset="3" :span="8">
            <el-form-item label="报文类型" prop="msgType">
              <el-select
                v-model="submitParams.msgType"
                placeholder="报文类型"
                style="width: 100%"
                @change="msgTypeChange"
                :disabled="formdisable"
              >
                <el-option
                  v-for="dict in sysCodeList"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :offset="3" :span="8">
            <el-form-item label="业务类型编码" prop="bizType">
              <el-select
                v-model="submitParams.bizType"
                placeholder="业务类型编码"
                style="width: 100%"
                @change="bizTypeChange"
                :disabled="formdisable"
              >
                <el-option
                  v-for="dict in msgTypeList"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="业务种类编码" prop="ctgyType">
              <el-select
                v-model="submitParams.ctgyType"
                placeholder="业务种类编码"
                style="width: 100%"
                :disabled="formdisable"
              >
                <el-option
                  v-for="dict in bizTypeList"
                  :key="dict.value"
                  :label="`${dict.value}-${dict.text}`"
                  :value="dict.value"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row type="flex">
          <el-col :offset="3" :span="16">
            <el-form-item label="备注" prop="remarks">
              <el-input type="textarea" v-model="submitParams.remarks" :disabled="formdisable" maxlength="256" show-word-limit />
            </el-form-item>
          </el-col>
        </el-row>
      </el-card>

      <!-- <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>业务权限清单</span>
        </div>

      </el-card> -->

      <el-card class="form-card txnInfo-card">
        <div slot="header" class="label-header-msg">
          <span>账单信息清单列表</span>
        </div>

        <el-row>
        <ht-table
          ref="dataTable"
          :showSerialNumber="false"
          :multi-select="false"
          :opButtonList="opButtonList"
          :tableBindColumns="tableBindColumns"
          :randomRowKey="true"
          :showPagination="false"
        >
          <template v-slot:operate>
            <el-table-column
              label="操作"
              align="center"
              width="150"
              fixed="right"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <ht-button-group
                  :buttonList="[
                    {
                      label: '删除',
                      // permission: 'user:xxx:xxx',
                      doFunc: () => {
                        handleAction('deleteRow', scope.row, scope.$index);
                      },
                    },
                  ]"
                />
              </template>
            </el-table-column>
          </template>
        </ht-table>
        </el-row>
        <el-row>
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 50]"
            :page-size="pageSize"
            layout="->,total, sizes, prev, pager, next, jumper"
            :total="detailList.length">
          </el-pagination>
        </el-row>
      </el-card>

      <el-row>
        <el-col :offset="8" :span="12">
          <el-form-item>
            <el-button type="primary" v-if="!formdisable" @click="submitForm" v-loading.fullscreen.lock="loading">
              提 交
            </el-button>
            <el-button @click="refresh">重 置</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { authenticationNotificationEntrySave } from "@/api/cnaps/ccms/928";
import { listPageMixin } from "@/libs/listPageMixin";
import BankBranchDialog from "@/views/components/BankBranchDialog";
export default {
  name: "generalInformationEntry",
  mixins: [listPageMixin],
  components: { BankBranchDialog },
  computed: {},
  data() {
    return {
      sysCodeList: [],
      msgTypeList: [],
      bizTypeList: [],

      //前端分页参数
      currentPage: 1,
      pageSize: 20,
      detailList: [],

      loading: false,
      tableMsgType: "",
      tableBindColumns: [
        { label: `报文类型`, prop: "msgType", align: "center" },
        { label: `业务类型编码`, prop: "bizType", align: "center" },
        {
          label: `业务种类编码`,
          prop: "ctgyType",
          align: "center",
        },
      ],
      opButtonList: () => {
        return [
          {
            label: "新增",
            type: "primary",
            icon: "el-icon-plus",
            permission: "user:expandConfInfo:add",
            actionType: "add",
            clickFun: () => {
              this.addRow(this.submitParams.msgType);
            },
          },
        ];
      },
      // 录入参数
      submitParams: {
        sysCode: undefined,
        remarks: undefined,
        mngType: undefined,
        mngNum: undefined,
        msgType: undefined,
        bizType: undefined,
        ctgyType: undefined,

        detailListTbl: [],
      },

      //
      searchFormDictList: ["ORGAN_SYSTYPE_310", "MNG_TYPE", "MSG_TYPE148"],

      formdisable: false,

      rules: {
        sysCode: [{ required: true, message: "请输入系统编号", trigger: "blur" }],
        msgType: [{ required: true, message: "请输入报文类型", trigger: "blur" }],
        bizType: [{ required: true, message: "请输入业务类型", trigger: "blur" }],
        ctgyType: [{ required: true, message: "请输入业务种类", trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    /** 提交按钮 */
    submitForm: function () {
      if (this.detailList.length === 0) {
        this.msgError("请新增一条记录");
        return;
      }

      this.$set(this.rules.msgType[0], "required", false);
      this.$set(this.rules.bizType[0], "required", false);
      this.$set(this.rules.ctgyType[0], "required", false);

      this.$set(this.submitParams, "detailListTbl", this.detailList);

      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          this.loading = true;
          authenticationNotificationEntrySave(this.submitParams)
            .then((response) => {
              this.msgSuccess("提交成功");
              this.formdisable = true;
              this.$alert(`CORE_ID: ${response.result.rspId}`, "生成交易流水号", {
                confirmButtonText: "确定",
                callback: (action) => {
                },
              });
              this.loading = false;
            })
            .catch((err) => {
              this.$set(this.rules.msgType[0], "required", true);
              this.$set(this.rules.bizType[0], "required", true);
              this.$set(this.rules.ctgyType[0], "required", true);
              this.loading = false;
            });
        }
      });
    },
    //点击重置按钮
    refresh() {
      this.resetForm("submitParams");
      this.formdisable = false;
      this.$set(this.submitParams, "detailListTbl", []);
      this.$set(this, "sysCodeList", undefined);
      this.$set(this, "msgTypeList", undefined);
      this.$set(this, "bizTypeList", undefined);
      this.$set(this, "detailList", []);
      this.$refs.dataTable.dataList = [];
      this.$set(this.rules.msgType[0], "required", true);
      this.$set(this.rules.bizType[0], "required", true);
      this.$set(this.rules.ctgyType[0], "required", true);
    },

    sysCodeChange(code) {
      let dictKeyPre = `MSG_TYPE148_${code}`;
      this.getDicts(dictKeyPre).then((response) => {
        console.log(response);
        this.sysCodeList = response.result;
        this.$set(this.submitParams, "msgType", undefined);
      });
    },

    msgTypeChange(code) {
      let dictKeyPre = `BIZ_TYPE_${code}`;
      this.getDicts(dictKeyPre).then((response) => {
        console.log(response);
        this.msgTypeList = response.result;
        this.$set(this.submitParams, "bizType", undefined);
      });
    },

    bizTypeChange(code) {
      let dictKeyPre = `BIZ_CTGY_${code}`;
      this.getDicts(dictKeyPre).then((response) => {
        console.log(response);
        this.bizTypeList = response.result;
        this.$set(this.submitParams, "ctgyType", undefined);
      });
    },

    //增加行
    addRow(e) {
      this.$refs["submitParams"].validate((valid) => {
        if (valid) {
          let typeList = this.dictMap.MSG_TYPE148;
          for (let i = 0; i < typeList.length; i++) {
            if (typeList[i].value === e) {
              //dictValue，dictLabel保持和上面定义一致
              this.tableMsgType = typeList[i].value + "-" + typeList[i].text;
            }
          }
          let list = {
            msgType: this.tableMsgType,
            bizType: this.submitParams.bizType,
            ctgyType: this.submitParams.ctgyType,
          };
          this.detailList.push(list);
          this.$refs.dataTable.dataList.push(list);
          this.$set(this.submitParams, "msgType", undefined);
          this.$set(this.submitParams, "bizType", undefined);
          this.$set(this.submitParams, "ctgyType", undefined);
          this.$set(this.submitParams, "mngNum", this.detailList.length);
        }
      });
    },
    /** 明细按钮操作 */
    handleAction(type, row, index) {
      switch (type) {
        // 删除行
        case "deleteRow":
          this.$confirm("确定删除该条信息吗？")
            .then((_) => {
              let delIndex = (this.currentPage-1) * this.pageSize + index;
              this.detailList.splice(delIndex, 1);
              this.$refs.dataTable.dataList = this.detailList
              if(index === 0 && this.currentPage !== 1){
                this.handleCurrentChange(this.currentPage-1);
              }else {
                this.handleCurrentChange(this.currentPage);
              }
              this.$set(this.submitParams, "mngNum", this.detailList.length);
            })
            .catch((_) => {});
          break;
      }
    },


    //前端分页方法
    //切换每页显示数据量时的回调
    handleSizeChange(size) {
      this.pageSize = size;
      this.handleCurrentChange(this.currentPage);
    },
    handleCurrentChange(currentPage) {
      let page = this.detailList.slice((currentPage-1)*this.pageSize,currentPage*this.pageSize);
      this.$refs.dataTable.dataList = page
      this.currentPage = currentPage;
    },
  },
};
</script>
<style>
.label-header-msg {
  font-weight: bold;
}

.form-card {
  margin-bottom: 10px;
}
</style>
